﻿
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <title>AIKE注册</title>
   
    <link href="~/Lib/Home/register/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="~/Lib/Home/register/css/prettify.css" rel="stylesheet" />
    <link href="~/Lib/Home/register/css/iconfont.css" rel="stylesheet" />
    <link href="~/Common/layUI/theme/default/layer.css" rel="stylesheet" />
</head>
<body>
    <div class='container'>
        <section id="wizard">
            <div class="page-header">
                <h1>注册页面</h1>
            </div>
            <div id="rootwizard">
                <div class="navbar">
                    <div class="navbar-inner">
                        <div class="container">
                            <ul>
                                <li><a href="#tab1" data-toggle="tab"><span class="iconfont icon-1" ></span></a></li>
                                <li><a href="#tab2" data-toggle="tab"><span class="iconfont icon-2"></span></a></li>
                                <li><a href="#tab3" data-toggle="tab"><span class="iconfont icon-3"></span></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div id="bar" class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
                </div>
                <div class="tab-content">
                    <div class="tab-pane" id="tab1">
                        <h2>填写用户信息</h2>
                        <div class="tep1">
                            <form>

                                <div class="form-group">
                                    <label for="name">用户名：</label>
                                    <input type="text"  class="form-control" id="name" placeholder="用户名">
                                </div>

                                <div class="form-group">
                                    <label for="pwd1">密码：</label>
                                    <input type="password" class="form-control" id="pwd1" placeholder="密码">
                                </div>

                                <div class="form-group">
                                    <label for="pwd2">确认密码：</label>
                                    <input type="password" class="form-control" id="pwd2" placeholder="确认密码">
                                </div>

                            </form>
                        </div>
                    </div>
                    <div class="tab-pane" id="tab2">
                        <h2>绑定手机号码</h2>
                        <div class="form-group">
                            <label for="phone">手机号码：</label>
                            &nbsp;&nbsp;<input type="text" class="form-control" id="phone" placeholder="手机号码">
                            <label for="yzm">验证码：</label>
                            &nbsp;&nbsp;
                            <input type="text" class="form-control" id="yzm" placeholder="验证码"><br /><br />
                            <button class="btn btn-info" id="mm">获取验证码</button>
                        </div>
                    </div>
                    <div class="tab-pane" id="tab3">
                       <div class="success_bg" style="background-image:url(/Lib/Home/register/img/成功.png);">

                       </div>
                        <p>注册成功！</p>
                       <a class="btn btn-group-lg" href="../Home/Login">返回到登录</a>
                    </div>

                    <ul class="pager wizard">
                        <li class="previous first" style="display:none;"><a href="#">First</a></li>
                        <li class="previous"><a href="#">上一步</a></li>
                        <li class="next last" style="display:none;"><a href="#">Last</a></li>
                        <li class="next"><a href="#">下一步</a></li>
                    </ul>
                </div>
            </div>
        </section>
    </div>
    
    <script src="~/Common/jquery-2.1.1.js"></script>
    <script src="~/Common/bootstrap/js/bootstrap.min.js"></script>
    <script src="~/Lib/Home/register/js/jquery.bootstrap.wizard.js"></script>
    <script src="~/Lib/Home/register/js/prettify.js"></script>
    <script src="~/Common/layUI/layer.js"></script>
    <script>
        $(function () {

            $("#mm").click(function () {
                $.ajax({

                    url: "../Home/YZM",
                    data: {"phone":$("#phone").val()},
                    success: function (data) {
                        debugger
                        if (parseInt(data) == 1) {
                            
                            layer.msg("发送成功！", { icon: 1 });
                        }
                        else if (parseInt(data) == 0) {
                          
                            layer.msg("手机号码不能为空！", { icon: 2 });
                           
                           
                        }
                        else if (parseInt(data) == 2) {
                           
                            layer.msg("手机号码不符合规范！", { icon: 2 });
                            
                        }
                        else {
                           
                            layer.msg("发送失败", { icon: 2 });
                        }
                    },
                    error: function () {
                     
                        layer.msg("发送失败hahah！", { icon: 2 });
                       
                    }
                });
            });

        });
    </script>
    <script>
        $(document).ready(function () {
        var i =0;
	  	$('#rootwizard').bootstrapWizard({'tabClass': 'nav', 'debug': false, onShow: function(tab, navigation, index) {
				console.log('onShow');
			}, onNext: function(tab, navigation, index) {
                console.log('onNext');
                b = true;
                if ($("#name").val() == "") {
                    layer.msg("请填写用户名!", { icon: 2 });
                    return false;
                }
                else if ($("#pwd1").val() == "" || $("#pwd2").val() == "") {
                    layer.msg("请填写密码!", { icon: 2 });
                    return false;
                }
                else if ($("#pwd1").val()!=$("#pwd2").val()) {
                    layer.msg("两次密码不一致!", { icon: 2 });
                    return false;
                }
                if (i== 1){
                    if ($("#phone").val() == "") {
                        layer.msg("请填写手机号码!", { icon: 2 });
                        return false;
                    }
                    if ($("#yzm").val() == "") {
                        layer.msg("请填写验证码!", { icon: 2 });
                        return false;
                    }
                    else {
                        i++;
                    }
                }
                if (i ==2) {
                    $(function () {
                        $.ajax({
                            url: "../Home/Registers",
                            data: { "name": $("#name").val(), "phone": $("#phone").val(), "pwd": $("#pwd1").val(), "yzm": $("#yzm").val() },
                            success: function (data) {
                                if (parseInt(data) == 0) {
                                    layer.msg("验证码有误！", { icon: 2 });
                                    $("#tab2").addClass("active");
                                    $("#tab3").css("display","none");
                                    i = 2;
                                }
                                if (parseInt(data) ==1) {
                                    layer.msg("注册失败！", { icon: 2 });
                                    $("#tab2").addClass("active");
                                    $("#tab3").css("display", "none");
                                    i = 2;
                                }
                                if (parseInt(data) ==2) {
                                    layer.msg("注册成功！", { icon: 1 });
                                    $("#tab2").removeClass("active");
                                    $("#tab3").addClass("active");
                                    $("#tab3").css("display", "block");

                                }
                            },
                            error: function () {
                                layer.msg("注册失败！", { icon: 2 });
                                $("#tab2").addClass("active");
                                $("#tab3").css("display", "none");
                                i = 2;
                            }
                        });

                    });
                }
                if (i == 3) {
                    return false;
                }
                if (!b) {
                    return false;
                }

                else{
                    layer.msg("下一步", { icon: 1 });
                    i++;
                }
                
			}, onPrevious: function(tab, navigation, index) {
                console.log('onPrevious');
                
                i--;
			}, onLast: function(tab, navigation, index) {
				console.log('onLast');
			}, onTabClick: function(tab, navigation, index) {
				console.log('onTabClick');
				alert('on tab click disabled');
			}, onTabShow: function(tab, navigation, index) {
                console.log('onTabShow');
               
				var $total = navigation.find('li').length;
				var $current = index+1;
				var $percent = ($current/$total) * 100;
                $('#rootwizard .progress-bar').css({width:$percent+'%'});
			}});

			$('#pills').bootstrapWizard({'tabClass': 'nav nav-pills', 'debug': false, onShow: function(tab, navigation, index) {
					console.log('onShow');
				}, onNext: function(tab, navigation, index) {
					console.log('onNext');
				}, onPrevious: function(tab, navigation, index) {
					console.log('onPrevious');
				}, onLast: function(tab, navigation, index) {
					console.log('onLast');
				}, onTabClick: function(tab, navigation, index) {
					console.log('onTabClick');
					alert('on tab click disabled');
				}, onTabShow: function(tab, navigation, index) {
					console.log('onTabShow');
					var $total = navigation.find('li').length;
                    var $current = index + 1;
                   
					var $percent = ($current/$total) * 100;
                    $('#pills .progress-bar').css({width:$percent+'%'});
				}});

			$('#tabsleft').bootstrapWizard({'tabClass': 'nav nav-tabs', 'debug': false, onShow: function(tab, navigation, index) {
						console.log('onShow');
					}, onNext: function(tab, navigation, index) {
						console.log('onNext');
					}, onPrevious: function(tab, navigation, index) {
						console.log('onPrevious');
					}, onLast: function(tab, navigation, index) {
						console.log('onLast');
					}, onTabClick: function(tab, navigation, index) {
						console.log('onTabClick');

					}, onTabShow: function(tab, navigation, index) {
						console.log('onTabShow');
						var $total = navigation.find('li').length;
						var $current = index+1;
						var $percent = ($current/$total) * 100;
                        $('#tabsleft .progress-bar').css({width:$percent+'%'});

						// If it's the last tab then hide the last button and show the finish instead
                        if ($current >= $total) {
                            
							$('#tabsleft').find('.pager .next').hide();
							$('#tabsleft').find('.pager .finish').show();
							$('#tabsleft').find('.pager .finish').removeClass('disabled');
						} else {
							$('#tabsleft').find('.pager .next').show();
							$('#tabsleft').find('.pager .finish').hide();
						}

					}});

				$('#inverse').bootstrapWizard({'tabClass': 'nav', 'debug': false, onShow: function(tab, navigation, index) {
						console.log('onShow');
					}, onNext: function(tab, navigation, index) {
						console.log('onNext');
						if(index==2) {
							// Make sure we entered the name
							if(!$('#name').val()) {
								alert('You must enter your name');
								$('#name').focus();
								return false;
							}
						}

						// Set the name for the next tab
						$('#inverse-tab3').html('Hello, ' + $('#name').val());

					}, onPrevious: function(tab, navigation, index) {
						console.log('onPrevious');
					}, onLast: function(tab, navigation, index) {
						console.log('onLast');
					}, onTabClick: function(tab, navigation, index) {
						console.log('onTabClick');
						alert('on tab click disabled');
						return false;
					}, onTabShow: function(tab, navigation, index) {
						console.log('onTabShow');
						var $total = navigation.find('li').length;
						var $current = index+1;
						var $percent = ($current/$total) * 100;
                        $('#inverse .progress-bar').css({width:$percent+'%'});
					}});
				$('#tabsleft .finish').click(function() {
					alert('Finished!, Starting over!');
					$('#tabsleft').find("a[href*='tabsleft-tab1']").trigger('click');
				});

		});</script>
</body>
</html>
